<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8" />
    <title><?= \app\Common\Util\TP::config('app.app_name') ?: '逸旁科技' ?></title>
    <link rel="stylesheet" href="/elementUI/element-plus@2.3.7.css" />
    <script src="/js/axios@1.4.0.min.js"></script>
    <script src="/js/vue@3.3.4.global.js"></script>
    <script src="/elementUI/element-plus_icons-vue@2.1.0.iife.min.js"></script>
    <script src="/elementUI/element-plus@2.3.7.full.js"></script>
    <style>
        html,body{height: 100%;margin: 0;padding: 0;}
        [v-cloak]{display: none;}
    </style>
    <script>
        // 环境变量
        const ENV = {
            IS_DEV: <?= \app\Common\Util\TP::isDev() ? 'true' : 'false' ?>
        };

        // vue 初始化数据
        let VueInit = {
            data:{
                windowHeight:window.innerHeight
            },
            methods:{},
            watch:{},
            /**
             * 组件
             */
            components:{},
            /**
             * 生命周期事件处理
             */
            event:{
                handlers:{},
                /**
                 * 添加处理
                 * @param methodName eg created:add 会在created里面调用add函数
                 * @param callable
                 */
                addHandler(methodName, callable){
                    let harr = methodName.split(':')
                    if (callable !== undefined){
                        VueInit.methods[harr[1]] = callable;
                    }
                    if (!this.handlers.hasOwnProperty(harr[0])) {
                        this.handlers[harr[0]] = [];
                    }
                    this.handlers[harr[0]].push(harr[1]);
                }
            },
            use:{
                items:[],
                add(name, config = {}){
                    this.items.push({name, config})
                }
            },
            getInit(){
                let init = {
                    data() {
                        return VueInit.data;
                    },
                    methods: VueInit.methods,
                    watch: VueInit.watch,
                };

                for (const event in VueInit.event.handlers) {
                    init[event] = function (){
                        for (const handler of VueInit.event.handlers[event]) {
                            this[handler]();
                        }
                    }
                }

                return init;
            },
            createApp(el){
                let Init = Vue.createApp(this.getInit());

                this.use.add(ElementPlus);

                // use
                for (const use of this.use.items) {
                    Init.use(use.name, use.config);
                }
                // 加载element图标组件
                for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
                    Init.component(key, component)
                }
                // 加载自定义组件
                for (const [key, component] of Object.entries(this.components)) {
                    Init.component(key, component)
                }

                return Init.mount(el);
            }
        };
    </script>
    {block name="header"}{/block}
</head>
<body>
<div id="app" v-cloak>
    {block name="main"}{/block}
</div>
</body>


{include file='../app/Admin/View/VueComponents/i-frame.php'}

{block name="footer"}{/block}

<script>
    let VueApp = VueInit.createApp("#app");
</script>
</html>